<template>
  <el-dialog :visible.sync="costDetlDialog" :close-on-click-modal="false" :before-close="costDetlCancel" :fullscreen="costDetlDialog" @close="costDetlCancel">
    <div class="app-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="query.longtermServitemName" clearable size="small" placeholder="服务项目名称" style="width: 170px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-date-picker v-model="query.kfrq" placeholder="开方日期" type="datetimerange" style="width: 370px;" class="filter-item" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
        <rrOperation :crud="crud" />
      </div>
      <!--工具栏-->
      <div class="head-container">
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <el-button v-if="crud.optShow.add" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="crud.toAdd">新 增</el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload2" @click="openFymx">上传费用明细</el-button>
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
            <el-form-item label="服务项目名称">
              <el-select
                v-model="form.longtermServitemName"
                style="width: 370px"
                placeholder="请选择"
                @change="seletChange"
              >
                <el-option
                  v-for="item in allServiceItems"
                  :key="item.longtermServitemName"
                  :label="item.longtermServitemName"
                  :value="item.longtermServitemName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="服务类型" prop="longtermServType">
              <el-select v-model="form.longtermServType" filterable placeholder="请选择" disabled style="width: 370px;">
                <el-option
                  v-for="item in dict.PRIC_LONGTERM_SERV_TYPE"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="开方日期" prop="longtermPlanBegntime">
              <el-date-picker v-model="form.longtermPlanBegntime" type="datetime" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="单价">
              <el-input-number v-model="form.pric" :precision="2" :step="0.01" :max="form.pric" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="数量" prop="sinCnt">
              <el-input-number v-model="form.sinCnt" :precision="1" :step="0.1" style="width: 370px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!-- 提交费用明细 -->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="fymxDialog" :title="crud.status.title" width="600px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
            <el-form-item label="人员姓名" prop="psnName">
              <el-input v-model="PSN_NAME" disabled style="width: 370px;" />
            </el-form-item>
            <el-form-item label="证件类型" prop="certType">
              <el-select v-model="CERT_TYPE" filterable placeholder="请选择" disabled style="width: 370px;">
                <el-option
                  v-for="item in dict.zjlx"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certno">
              <el-input v-model="CERTNO" disabled style="width: 370px;" />
            </el-form-item>
            <el-form-item label="入院日期" prop="certno">
              <el-input v-model="ryrq" disabled style="width: 370px;" />
            </el-form-item>
            <el-form-item label="出院日期" prop="certno">
              <el-input v-model="cyrq" disabled style="width: 370px;" />
            </el-form-item>
            <el-form-item label="总费用" prop="certno">
              <el-input v-model="zfy" disabled style="width: 370px;" />
            </el-form-item>
            <el-form-item label="明细数量" prop="certno">
              <el-input v-model="zl" disabled style="width: 370px;" />
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeFymx">取消</el-button>
            <el-button type="primary" @click="submitCostDetl">提交</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="longtermServitemNo" label="长期护理服务项目编号" />
          <el-table-column prop="longtermServitemName" label="长期护理服务项目名称" />
          <el-table-column prop="longtermServType" label="长期护理服务类型">
            <template slot-scope="scope">
              {{ dict.label.PRIC_LONGTERM_SERV_TYPE[scope.row.longtermServType] }}
            </template>
          </el-table-column>
          <el-table-column prop="pric" label="单价" />
          <el-table-column prop="sinCnt" label="单次数量" />
          <el-table-column prop="amt" label="金额" />
          <el-table-column prop="chrgitmLv" label="收费项目等级">
            <template slot-scope="scope">
              {{ dict.label.PRIC_CHRGITM_LV[scope.row.chrgitmLv] }}
            </template>
          </el-table-column>
          <el-table-column prop="longtermPlanBegntime" label="开方时间" />
          <el-table-column prop="sfsc" label="是否上传医保">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.sfsc === '1'" effect="plain" type="success">
                已上传
              </el-tag>
              <el-tag v-else effect="plain" type="danger">
                未上传
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import crudPricCostDetl from '@/api/business/pricCostDetl'
import crudPricServiceItem from '@/api/business/pricServiceItem'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import moment from 'moment'

const defaultForm = { pricCostDetlId: null, longtermExeDetlCodg: null, longtermPlanDetlCodg: null, longtermDetlId: null, longtermBchno: null, longtermTaskRecBchno: null, longtermPlanDetlId: null, longtermServType: null, longtermServitemNo: null, longtermServitemName: null, medinsListName: null, longtermPlanBegntime: null, longtermPlanEndtime: null, longtermActBegntime: null, longtermActEndtime: null, insuAdmdvs: null, insutype: null, longtermDura: null, usedFrqu: null, longtermDetlSouc: null, pric: null, sinCnt: null, prcuntNo: null, nurscarePsnName: null, nurscarePsnNo: null, nurscarePsnMob: null, amt: null, psnNo: null, certType: null, certno: null, psnName: null, nurscareWay: null, longtermEvalLv: null, regBegntime: null, longtermRegId: null, longtermTrtAppyId: null, nurscareOrgNo: null, nurscareOrgName: null, selfpayPropType: null, selfpayProp: null, chrgitmLv: null, servCont: null, ownpayFlag: null, hilistType: null, fixBlngAdmdvs: null, medType: null, feeOcurTime: null, medListCodg: null, medListName: null, medinsListCodg: null, detItemFeeSumamt: null, bilgDeptCodg: null, bilgDeptName: null, bilgDrCodg: null, bilgDrName: null, acordDeptCodg: null, acordDeptName: null, ordersDrCode: null, ordersDrName: null, hospApprFlag: null, tcmdrugUsedWay: null, etipFlag: null, etipHospCode: null, dscgTkdrugFlag: null, memo: null, combNo: null, longtermExeDetlCodg1: null, nurscarePsnFlag: null, medinsPric: null, stdPric: null, asstType: null, asstProdType: null, asstPrdr: null, asstSpec: null, hilistCode: null, hilistName: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null }
export default {
  name: 'PricCostDetl',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(function() {
    return Object.assign({ pricRgstInsId: this.RGST_INS_ID }, defaultForm)
  }), crud()],
  dicts: ['PRIC_LONGTERM_SERV_TYPE', 'PRIC_PRCUNT_NO', 'PRIC_CHRGITM_LV', 'PRIC_SELFPAY_PROP_TYPE', 'PRIC_OWNPAY_FLAG', 'PRIC_OVERLMT_DSPO_WAY', 'PRIC_ENAB_STAS', 'PRIC_VALI_FLAG', 'ccstcqh'],
  cruds() {
    return CRUD({ title: '费用明细', url: 'api/pricCostDetl', query: { pricRgstInsId: '' }, idField: 'pricCostDetlId', sort: 'pricCostDetlId,desc', crudMethod: { ...crudPricCostDetl }})
  },
  data() {
    return {
      costDetlDialog: false,
      fymxDialog: false,
      ryrq: '',
      cyrq: '',
      hlsc: '',
      zfy: '',
      zl: '',
      allServiceItems: [],
      INSU_ADMDVS: '',
      INSUTYPE: '',
      PSN_NO: '',
      CERT_TYPE: '',
      CERTNO: '',
      PSN_NAME: '',
      NURSCARE_WAY: '',
      LONGTERM_EVAL_LV: '',
      REG_BEGNTIME: '',
      LONGTERM_REG_ID: '',
      LONGTERM_TRT_APPY_ID: '',
      NURSCARE_PSN_NAME: '',
      NURSCARE_PSN_NO: '',
      OWNPAY_FLAG: '',
      RGST_INS_ID: '',
      permission: {
        add: ['admin', 'pricCostDetl:add'],
        edit: ['admin', 'pricCostDetl:edit'],
        del: ['admin', 'pricCostDetl:del']
      },
      rules: {
        sinCnt: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ],
        longtermPlanBegntime: [
          { required: true, message: '开放日期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      console.log('beforeRefresh this.ksrq:', this.query.kfrq)
      if (this.query.kfrq) {
        console.log('beforeRefresh:', this.kfrq)
        const date1 = moment(this.query.kfrq[0]).format('YYYY-MM-DD HH:mm:ss')
        const date2 = moment(this.query.kfrq[1]).format('YYYY-MM-DD HH:mm:ss')
        this.query.date1 = date1
        this.query.date2 = date2
        console.log('beforeRefresh date1:', this.query.date1)
        console.log('beforeRefresh date2:', this.query.date2)
      }
      return this.costDetlDialog
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.getAllItems()
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToAdd](crud, form) {
      this.getAllItems()
    },
    // 获取所有机构服务项目
    getAllItems() {
      crudPricServiceItem.getAllItems().then(res => {
        this.allServiceItems = res.content
        console.log('getAllItems:{}', this.allServiceItems)
      }).catch(() => { })
    },
    // 获取选中的对象
    seletChange(val) {
      // 选中的数据和options进行匹配
      var obj = {}
      obj = this.allServiceItems.find(function(i) {
        return i.longtermServitemName === val
      })
      console.log('seletChange:{}', obj)
      this.form.longtermServType = obj.longtermServType
      this.form.longtermServitemNo = obj.longtermServitemNo
      this.form.longtermServitemName = obj.longtermServitemName
      this.form.prcuntNo = obj.nursOrgServitemPrcuntNo
      this.form.pric = obj.nursOrgServitemPric
      this.form.selfpayPropType = obj.selfpayPropType
      this.form.selfpayProp = obj.selfpayProp
      this.form.chrgitmLv = obj.nursOrgChrgitmLv
      this.form.memo = obj.nursOrgServitemMemo
      this.form.ownpayFlag = obj.ownpayFlag
      this.form.servCont = obj.nursOrgServitemMemo

      const that = this
      this.form.insuAdmdvs = that.INSU_ADMDVS
      this.form.insutype = that.INSUTYPE
      this.form.psnNo = that.PSN_NO
      this.form.certType = that.CERT_TYPE
      this.form.certno = that.CERTNO
      this.form.psnName = that.PSN_NAME
      this.form.nurscareWay = that.NURSCARE_WAY
      this.form.longtermEvalLv = that.LONGTERM_EVAL_LV
      this.form.regBegntime = that.REG_BEGNTIME
      this.form.longtermRegId = that.LONGTERM_REG_ID
      this.form.longtermTrtAppyId = that.LONGTERM_TRT_APPY_ID
      this.form.nurscarePsnName = that.NURSCARE_PSN_NAME
      this.form.nurscarePsnNo = that.NURSCARE_PSN_NO
      this.form.pricRgstInsId = that.RGST_INS_ID
      console.log('seletChange:{}', that.form)
    },
    costDetlCancel() {
      this.costDetlDialog = false
    },
    openFymx() {
      this.fymxDialog = true

      crudPricCostDetl.queryPricCostDetl({ rgst_ins_id: this.RGST_INS_ID })
        .then(res => {
          console.log(res)
          this.ryrq = res.ryrq
          this.cyrq = res.cyrq
          this.hlsc = res.hlsc
          this.zfy = res.zfy
          this.zl = res.zl
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeFymx() {
      this.fymxDialog = false
    },
    submitCostDetl() {
      this.$confirm('你确定上传全部费用吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fymxDialog = false
        this.crud.toQuery()
      })
    }
  }
}
</script>

<style scoped>

</style>
